<template>
  <div id="app">
    <h2>测试题</h2>
    <MySubject
      v-for="(item, index) in arr"
      :key="index"
      :obj="item"
      @judge="sum"
      :index="index"
    ></MySubject>
    <div>
      <Myflag
        v-for="(item, index) in arr"
        :key="index"
        :flag="item.flag"
        :flag1="item.flag1"
      ></Myflag>
    </div>
  </div>
</template>

<script>
import MySubject from "./components/my-subject.vue";
import Myflag from "./components/my-flag.vue";
export default {
  components: {
    MySubject,
    Myflag,
  },
  data() {
    return {
      arr: [
        {
          num: Math.floor(Math.random() * 10 + 1),
          num1: Math.floor(Math.random() * 10 + 1),
          flag: false,
          flag1: false,
        },
        {
          num: Math.floor(Math.random() * 10 + 1),
          num1: Math.floor(Math.random() * 10 + 1),
          flag: false,
          flag1: false,
        },
        {
          num: Math.floor(Math.random() * 10 + 1),
          num1: Math.floor(Math.random() * 10 + 1),
          flag: false,
          flag1: false,
        },
        {
          num: Math.floor(Math.random() * 10 + 1),
          num1: Math.floor(Math.random() * 10 + 1),
          flag: false,
          flag1: false,
        },
        {
          num: Math.floor(Math.random() * 10 + 1),
          num1: Math.floor(Math.random() * 10 + 1),
          flag: false,
          flag1: false,
        },
      ],
    };
  },
  methods: {
    sum(flag, index) {
      // console.log(flag, index);
      if (flag === true) {
        this.arr[index].flag = true;
      } else {
        this.arr[index].flag1 = true;
      }
    },
  },
};
</script>

<style>
body {
  background-color: #eee;
}

#app {
  background-color: #fff;
  width: 500px;
  margin: 50px auto;
  box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.5);
  padding: 2em;
}
</style>
